<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<form-item-title text="个人信息"></form-item-title>
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-upload ref="fileref" :header="header" :action="action" @on-success="successPhoto"
							@on-remove="removePhoto" max-count="1"></u-upload>
						<u-form-item label="本人照片"></u-form-item>
						<u-form-item label="姓名"><u-input input-align="right" v-model="formdata.name" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" v-model="formdata.age" /></u-form-item>
						<u-form-item label="性别"><u-input :disabled="true" input-align="right" @click="showSex = true"
								v-model="sexlabel" type="select" /></u-form-item>
					</u-form>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="备注" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.remark" />
					</u-form-item>
				</view>
			</view>
			<form-item-title text="成功案例"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-upload ref="zuopinref" :header="header" :action="action" max-count="3" upload-text="作品"
						@on-success="successZuopin" @on-remove="removeZuopin"></u-upload>
				</view>
			</view>

		</view>
		<view class="bottom-box">
			<view class="form-box">
				<view class="flex-row justify-between items-center group_16">
					<view class="flex-col button_3">
						<text class="self-start font_3 text_28">服务费用</text>
						<view class="flex-row items-center self-stretch section_11 mt-7">
							<text class="text_31">￥</text>
							<input class="ml-2 text_30" type="digit" :value="formdata.fees" @input="changeInput"></input>
							<text>/次</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center button_4"><text class="font text_29"
							@tap="handleSubmit">立即发布</text></view>
				</view>
			</view>
		</view>
		<u-select v-model="showSex" mode="single-column" :list="sexlist" @confirm="handlesexconfirm"></u-select>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import utils from "../../../utils/util.js";
	import reportLoss from "../../../api/reportLoss.js";
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				fileList: [],
				zuopinList: [],
				formdata: {
					age: "",
					fees: 0.00,
					gender: "",
					lat: 0,
					lng: 0,
					name: "",
					photo: "",
					remark: "",
					successCases: "",
				},
				showSex: false,
				sexlist: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				sexlabel: '',
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				}
			}
		},
		onLoad() {
			utils.getLocationInfo().then(res => {
				this.formdata.lat = res.latitude;
				this.formdata.lng = res.longitude;
			})
		},
		methods: {
			successPhoto(data, index) {
				if (data.code !== 200) {
					this.$refs.fileref.lists[index].error = true
				} else {
					this.fileList.push(data.accessPath);
					this.formdata.photo = data.accessPath;
				}
			},
			removePhoto(index) {
				this.fileList.splice(index, 1)
			},
			handlesexconfirm(val) {
				this.formdata.gender = val[0].value;
				this.sexlabel = val[0].label;
			},
			successZuopin(data, index) {
				if (data.code !== 200) {
					this.$refs.zuopinref.lists[index].error = true
				} else {
					this.zuopinList.push(data.accessPath)
				}
			},
			removeZuopin(index) {
				this.zuopinList.splice(index, 1)
			},
			changeInput(e) {
				this.formdata.fees = e.detail.value
			},
			handleSubmit() {
				utils.checkSubscribe(['EhRq5iB8DA3syKCIMFyeQr8_KG6F9y3jXAZWLoLpgHw']).then(res => {
					this.formdata.lng = `${this.formdata.lng}`;
					this.formdata.lat = `${this.formdata.lat}`;
					uni.showLoading({
						title: '发布中'
					})
					reportLoss
						.addPetDetective(this.formdata)
						.then((res) => {
							uni.hideLoading();
							if (res.code === 200) {
								uni.showToast({
									title: '发布成功',
									icon: "none"
								})
								setTimeout(() => uni.navigateBack(), 1000)
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: '发布失败',
								icon: "error"
							})
						});
				})
			},
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background: linear-gradient(180deg, #FCD610 0%, #F6F6F6 40%, #F6F6F6 100%);
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx 32rpx 32rpx;
				margin-bottom: 40rpx;

				.form-item {
					margin-top: 24rpx;

					.ml-9 {
						margin-left: 18rpx;
					}

				}

				.group_6 {
					padding: 32rpx 0;
					border-bottom: solid 2rpx #f3f3f3;

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.76rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_7 {
						line-height: 26.02rpx;
					}

					.image-wrapper {
						background-color: #ececec;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						font-size: 30px;
						color: #999999
					}
				}
			}
		}

		.bottom-box {
			padding: 16rpx 0;
			background: #FFFFFF;
			box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.mt-7 {
				margin-top: 14rpx;
			}

			.group_16 {
				padding-left: 36rpx;
				padding-right: 28rpx;

				.button_3 {
					width: max-content;

					.font_3 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 22.4rpx;
						font-weight: 700;
						color: #666666;
					}

					.text_28 {
						color: #000000;
					}

					.section_11 {
						padding: 6rpx 20rpx;
						background-color: #f6f6f6;
						border-radius: 60rpx;

						.text_31 {
							color: #000000;
							font-size: 24rpx;
							line-height: 17.72rpx;
						}

						.text_30 {
							color: #ff7676;
							font-size: 40rpx;
							line-height: 28.48rpx;
							width: 180rpx;
						}
					}
				}

				.button_4 {
					padding: 28rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					width: 318rpx;
					height: 84rpx;

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 30.02rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_29 {
						line-height: 29.88rpx;
					}
				}
			}
		}

		/deep/ .u-add-tips {
			display: none;
		}
	}
</style>